<template>
  <a-modal
    class="add-org-dialog"
    v-model:visible="dataWrapper.visiable"
    title="添加标签"
    @ok="handleOk"
    @cancel="cancel"
  >
    <a-form
      :model="dataWrapper.formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item
        has-feedback
        label="绑定分类"
        v-bind="validateInfos.categoryIds"
      >
        <a-tree-select
          style="width: 100%"
          placeholder="选择绑定分类"
          tree-node-filter-prop="title"
          :show-checked-strategy="TreeSelect.SHOW_ALL"
          v-model:value="dataWrapper.formData.categoryIds"
          :tree-data="classifyTreeData"
          :replace-fields="{
            children: 'childCateGoryList',
            title: 'name',
            key: 'id',
            value: 'id',
          }"
          tree-checkable
          allow-clear
          tree-check-strictly
        />
      </a-form-item>
      <a-form-item has-feedback label="标签名称" v-bind="validateInfos.tagName">
        <a-input
          v-model:value="dataWrapper.formData.tagName"
          placeholder="请输入标签名称"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ValidationRule } from 'ant-design-vue/lib/form/Form'
import { Form, TreeSelect } from 'ant-design-vue'
import { ref } from 'vue'
import { ClassifyItem } from '@/api/premium/category/model/classifyModel'
import type { AddTagDiaFormData, AddTagDiaState } from '../types'
const { useForm } = Form

const props = defineProps<{
  dataWrapper: AddTagDiaState
  classifyTreeData: ClassifyItem[]
}>()

const emits = defineEmits<{
  (e: 'enter'): void
}>()

const rules = ref<Record<keyof AddTagDiaFormData, ValidationRule[]>>({
  tagName: [{ required: true, message: '标签名称必填', trigger: 'blur' }],
  categoryIds: [
    {
      required: true,
      message: '分类绑定信息必填',
      trigger: 'blur',
      type: 'array',
    },
  ],
})

const { validate, validateInfos, resetFields } = useForm(
  props.dataWrapper.formData,
  rules
)

const handleOk = () => {
  validate()
    .then(() => {
      emits('enter')
    })
    .catch((err) => {
      console.error(err.errorFields[0].errors[0])
    })
}

const cancel = () => {
  resetFields()
}
</script>

<style lang="scss" scoped>
@include b(add-org-dialog) {
}
</style>
